<template>
  <div v-loading="spinning">
    <el-row v-if="data.showOpt">
      <el-col :span="3" :offset="1">
        <el-select
          v-model="data.root.type"
          filterable
          allow-create
          default-first-option
          :reserve-keyword="false"
          placeholder="Choose tags for your article"
        >
          <el-option
            v-for="item in data.types"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="4" :offset="1">
        <el-input placeholder="节点标签" v-model:value="data.root.label">
          <template #prepend>节点标签</template>
        </el-input>
      </el-col>
      <el-col :span="4" :offset="1">
        <el-input addon-before="节点名称" placeholder="节点名称" v-model:value="data.root.name">
          <template #prepend>节点名称</template>
        </el-input>
      </el-col>
      <el-col :span="4" :offset="1">
        <el-input addon-before="节点备注" placeholder="节点备注" v-model:value="data.root.remark">
          <template #prepend>节点名称</template>
        </el-input>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button type="primary" @click="addTreeRoot">添加</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="searchTree">查询</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="14" :offset="5" style="padding-top: 15px">
        <DynamicTree :treeType="data.treeType" :canMultipleCheck="false" :canEdite="true" />
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import request from '@/config/axios'
import { ElRow, ElCol, ElInput, ElButton, ElSelect, ElOption } from 'element-plus'
import { DynamicTree } from '@/components/DynamicTree'
const spinning = ref(false)
const data: any = reactive({
  types: [],
  treeType: '',
  root: { type: '', label: '', name: '', remark: '' },
  showOpt: true
})
function searchTree() {
  data.treeType = data.root.type
}
function addTreeRoot() {
  request.postFull({ url: '/infra/base/tree/addTreeRoot', data: data.root }, spinning)
}
onMounted(() => {
  request.get({ url: '/infra/base/tree/listTreeType' }).then((value) => {
    let url = window.location.hash
    let type = url.substring(url.lastIndexOf('/') + 1)
    if (value.indexOf(type) > 0) {
      data.treeType = type
      data.showOpt = false
    } else {
      value.forEach((element) => {
        data.types.push({ value: element, text: element })
      })
    }
  })
})
</script>
